import React from "react";
import {Image, StyleSheet, View} from "react-native";
import {ScreenDimensions} from "../../libs/utils/ScreenDimensions";
import {Resource} from "../../resource/Resource";


type ChatAvatarImageProp = {
    avatar:string
}

type ChatAvatarImageState = {

}

export default class ChatAvatarImage extends React.Component<ChatAvatarImageProp, ChatAvatarImageState> {
    constructor(props:ChatAvatarImageProp) {
        super(props);
    }


    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.avatarImage}  source={!this.props.avatar ? Resource.demo_header : {uri:this.props.avatar}} />
                {false && <View style={styles.dotImageContainer}>
                    <View style={styles.dotImageCenter} />
                </View>}
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        justifyContent:'space-between',
        width: 57,
        height: 57,
    },

    avatarImage: {
        width: 50,
        height: 50,
        borderRadius:25,
        position:'absolute',
        left:3,
        bottom:3,
        zIndex:0
    },

    dotImageContainer: {
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        width: 18,
        height: 18,
        borderRadius:9,
        backgroundColor:'#fff',
        position:'absolute',
        right:0,
        top:0,
        zIndex:1
    },

    dotImageCenter:{
        width: 8,
        height: 8,
        borderRadius:4,
        backgroundColor:ScreenDimensions.themeColor,
    }
});
